<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二次元风格の个人简介页面</title>
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
</head>

<body>
    <div class="main">
        <div class="container">
            <div class="section self">
                <div class="contain">
                    <img src="assets/images/user.jpg" alt="user.jpg" class="user-img">
                    <p class="title">KSaMar - 筱原 空</p>
                    <p class="sub-title">做自己想做，想自己所想</p>
                    <p class="text">All For One.</p>
                    <a href="#" class="down-link"><img src="assets/images/down.gif" alt="down.gif" class="down-img"></a>
                </div>
            </div>
            <div class="section skill">
                <div class="contain">
                    <div class="skill-pane">
                        <p class="title">前端</p>
                        <p class="text">HTML5 + CSS3 + JavaScript</p>
                        <p class="text">BootStrap4 / BootStrap5</p>
                        <p class="text">Vue3 + ELement Plus + TypeScript</p>
                        <p class="hr"></p>
                        <p class="title">后端</p>
                        <p class="text">Java / SpringBoot</p>
                        <p class="text">PHP / ThinkPHP</p>
                        <p class="text">Node.js</p>
                        <p class="hr"></p>
                        <p class="title">游戏制作</p>
                        <p class="text">Unity3d / C#</p>
                        <p class="text">Blender</p>
                        <p class="hr"></p>
                        <p class="title">音乐</p>
                        <p class="text">FL Studio</p>
                    </div>
                    <img src="assets/images/skill-font.png" alt="skill-font" class="skill-font">
                    <a href="#" class="down-link"><img src="assets/images/down.gif" alt="down.gif" class="down-img"></a>
                </div>
            </div>
            <div class="section time-line">
                <div class="contain">
                    <ul class="time-ul">
                        <li>
                            <div class="time-card">
                                <p class="title">2017 - 2018</p>
                                <p class="text">喜欢玩 Minecraft 想开发 Mod</p>
                                <p class="text">初二初次阅读 Java 入门到入土书籍</p>
                                <p class="text">但那时候贪玩就没有继续学习</p>
                            </div>
                        </li>
                        <li>
                            <div class="time-card">
                                <p class="title">2018 - 2021</p>
                                <p class="text">高中读了一个职校</p>
                                <p class="text">开始了我的编程之旅</p>
                                <p class="text">学习前端知识，使用 PHP 制作网页</p>
                            </div>
                        </li>
                        <li>
                            <div class="time-card">
                                <p class="title">2021 - 2077</p>
                                <p class="text">考上了一个还不错的大学</p>
                                <p class="text">会努力坚持自己的梦想</p>
                                <p class="text">未知的未来...</p>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="down-link"><img src="assets/images/down.gif" alt="down.gif" class="down-img"></a>
                </div>
            </div>
            <div class="section hobby">
                <div class="contain">
                    <div class="hobby-card left">
                        <img src="assets/images/和泉纱雾.jpg" alt="和泉纱雾.png" class="art">
                        <p class="title">GAME</p>
                        <p class="sub-title">游戏/单机/多人</p>
                        <p class="text">最喜欢玩的《Minecraft》</p>
                        <p class="text">最想玩的《机甲类游戏》</p>
                        <p class="text">有创作游戏的想法</p>
                    </div>
                    <div class="hobby-card mid">
                        <img src="assets/images/古河渚.png" alt="古河渚.png" class="art">
                        <p class="title">ACG</p>
                        <p class="sub-title">动漫/漫画/轻小说</p>
                        <p class="text">入坑作《Clannad》</p>
                        <p class="text">无论今后遇到什么事情,请不要后悔与我相遇。</p>
                        <p class="text">听潮鸣潮起潮落，看人生人来人往。</p>
                    </div>
                    <div class="hobby-card right">
                        <img src="assets/images/小鸟游六花.png" alt="小鸟游六花.png" class="art">
                        <p class="title">Music</p>
                        <p class="sub-title">音乐/乐器/Midi</p>
                        <p class="text">最喜欢的乐器 钢琴</p>
                        <p class="text">想制作 Future Bass 音乐</p>
                        <p class="text">世界太大，生命这样短。要把它过得尽量像自己想要的那个样子。</p>
                    </div>
                    <a href="#" class="down-link"><img src="assets/images/down.gif" alt="down.gif" class="down-img"></a>
                </div>
            </div>
            <div class="section contact">
                <div class="contain">
                    <p class="title">联系方式</p>
                    <div class="contact-pane">
                        <div class="contact-item">
                            <a href="#"><img src="assets/images/tim.png" alt="tim.png"></a>
                            <p>QQ</p>
                        </div>
                        <div class="contact-item">
                            <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=vFFwNiDH0KwSidBozDL2xMVG8bRBh9Bo&authKey=fABM9Vx6PSYpCpSrghZURZk1wqT7bXHIpOf14qvhQPx2F6cNdDvY12ydiF%2F9F85B&noverify=0&group_code=854197159"
                                target="_blank"><img src="assets/images/Web.png" alt="Web.png"></a>
                            <p>Web 技术交流群 854197159</p>
                        </div>
                        <div class="contact-item">
                            <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=p8LM_4Z6sYC8yiXaFXVU9qOraTOk2HhP&authKey=geCuGgBdEMbPflwHJ1UBB0VEurCpWF96hps%2FEDc%2B%2BAyeD%2FndQPH%2FPZY0qJPG18Za&noverify=0&group_code=417414639"
                                target="_blank"><img src="assets/images/M-I_Studio.png" alt="M-I_Studio.png"></a>
                            <p>M-I Studio 闲聊群 417414639</p>
                        </div>
                        <div class="contact-item">
                            <a href="https://space.bilibili.com/51110915" target="_blank"><img
                                    src="assets/images/bilibili.png" alt="bilibili.png"></a>
                            <p>bilibili</p>
                        </div>
                        <div class="contact-item">
                            <a href="https://github.com/baobaoJK" target="_blank"><img src="assets/images/github.png"
                                    alt="github.png"></a>
                            <p>GitHub</p>
                        </div>
                        <div class="contact-item">
                            <a href="https://gitee.com/baobao_JK" target="_blank"><img src="assets/images/gitee.png"
                                    alt="gitee.png"></a>
                            <p>Gitee</p>
                        </div>
                        <div class="contact-item">
                            <a href="https://blog.csdn.net/qq_29023593" target="_blank"><img
                                    src="assets/images/csdn.png" alt="csdn.png"></a>
                            <p>CSDN</p>
                        </div>
                        <div class="contact-item">
                            <a href="https://www.cnblogs.com/KSaMar" target="_blank"><img src="assets/images/ACGN.png"
                                    alt="ACGN.png"></a>
                            <p>博客园</p>
                        </div>
                    </div>
                    <div class="footer">
                        <p class="copy">Copyright © 2023-2023 M-I Studio. All Rights Reserved.</p>
                        <p class="studio">M-I Studio 版权所有</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="controls">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
<script src="assets/js/index.js"></script>

</html>